<template>
	<div class="prizeDraw">
		<div class="prizeDraw_top">
			<div class="prizeDraw_top_close">
				<div class class="prizeDraw_top_close_left">
					<image src="@/static/image/left.png" mode="" @click="backEvent()"></image>
				</div> 选择商品 <image src="@/static/image/close.png" mode="" class="closeImg" @click="backEvent()"></image>
			</div>
			<div class="prizeDraw_top_title">
				<input type="text" placeholder="请输入商品名称搜索" v-model="params.name"
					placeholder-class="zj-placeholder-class" @search='couponEvent'>
				<div class="inputSeach" @click='couponEvent()'>
					<image src="@/static/image/sousuo.png" mode=""></image>
				</div>
			</div>
			<scroll-view @scrolltolower="scrolltolower" :style="{height:scrollViewHeight+'rpx'}" :scroll-y="true"
				:scroll-with-animation="true" class="productItems_box">

				<!-- <div class="productItems_box"> -->
				<div class="productItems" v-for="(ite,idx) in productList" :key="idx">
					<div class="productItems_left">
						<div class="productItems_left_img">
							<image :src="ite.cover || ''" mode="aspectFit"></image>
						</div>
					</div>
					<div class="productItems_right">
						<div class="productItems_right_top">
							<div class="productItems_right_top_left ex">
								{{ite.title}}
							</div>
							<div class="productItems_right_top_right">
								库存：{{ite.countStock}}
							</div>
						</div>
						<div class="productItems_right_bottom">
							<div class="productItems_right_bottom_left">
								¥{{ite.price}} <span>¥{{ite.underLinePrice}}</span>
							</div>
							<div class="productItems_right_bottom_right" @click='productItemsEvent(ite)'>
								选择
							</div>
						</div>
					</div>
				</div>
				<!-- </div> -->
				<div class="listSpace" v-if="productList.length <= 0 && loading">
					<list-space></list-space>
				</div>

				<div class="zj_space">

				</div>
			</scroll-view>
		</div>
	</div>
</template>

<script>
	export default {
		filters: {
			formatDate(v) {
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			// [CouponTargetProductType.All, '全部商品'],
			// [CouponTargetProductType.Allowlist, '部分商品'],
			// [CouponTargetProductType.Denylist, '部分商品不可用'],
			targetProductTypeFilter(v) {
				var s = ''
				switch (v) {
					case 1:
						s = '全部商品'
						break;
					case 2:
						s = '部分商品'
						break;
					case 3:
						s = '部分商品不可用'
						break;
				}
				return s
			}
		},
		data() {
			return {
				params: {
					orgId: '',
					productType: 0,
					name: '',
					status: 1,
					page: 1,
					pageSize: 10,
				},
				productList: [],
				scrollViewHeight: 812,
				total: 0,
				redName: '',
				checkType: 0,
				loading: false,
				from: {

				}
			}
		},
		async mounted() {
			this.params.orgId = await this.$utils.getOrgId(this)
			this.getProductList()
		},
		// onPullDownRefresh() {
		// 	this.params.page = 1
		// 	this.productList = []
		// 	this.getProductList()
		// },
		methods: {
			onPullDownRefreshEvent() {
				this.params.page = 1
				this.productList = []
				this.loading = false
				this.getProductList()
			},
			// 搜索
			couponEvent() {
			
				this.$utils.throttle((res)=>{
					this.params.page = 1
					this.productList = []
					this.getProductList()
				},800)
			},
			scrolltolower(e) {
				if (this.productList.length < this.total) {
					this.params.page++
					this.getProductList()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			async getProductList() {
				const {
					data
				} = await this.$request(this.$Api.retailProductList, this.params, "get")
				this.loading = true
				if (!data.data.list) return
				this.productList = this.productList.concat(data.data.list)
				this.total = data.data.total || data.total
				uni.stopPullDownRefresh()
			},
			// 中奖名单
			winnersEvemt(ite) {

			},
			backEvent() {
				this.$emit('closeProductMaskEvnet')
			},
			//推送
			async tuiSendRedEvent(ite) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定推送优惠劵吗？',
					success: async (res) => {
						console.log('res', res)
						if (res.confirm) {
							that.from.targetProductItems = []
							that.from.targetProductType = ite.targetProductType
							that.from.couponId = ite.couponId
							const {
								data
							} = await that.$request(that.$Api.activityCreate, that.from, "post")
							if (data.code !== 200) return
							that.couponEvent()
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
						}
					}
				})
			},
			// productItemsEvent
			productItemsEvent(ite) {
				this.$emit('productItemsEvent', ite)
			}
		}
	}
</script>

<style lang="scss">
	.prizeDraw {
		width: 100%;
		height: 992rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow-y: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		color: #464C5B;
		font-size: 28rpx;

		.productItems_box {
			width: 100%;
			height: auto;
			padding: 24rpx 18rpx;
			box-sizing: border-box;
			background: #F5F9FF;
			border-radius: 8rpx;

		}

		.productItems {
			width: 100%;
			min-height: 144rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
			padding: 24rpx 16rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.productItems_left {
				.productItems_left_img {
					width: 172rpx;
					height: 112rpx;
				}
			}

			.productItems_right {
				margin-left: 24rpx;
				width: calc(100% - 210rpx);

				.productItems_right_top,
				.productItems_right_bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;

					.productItems_right_top_left {
						width: calc(100% - 180rpx);
						font-weight: 500;
						font-size: 28rpx;
						color: #464C5B;
						height: 40rpx;
						line-height: 40rpx;
						text-align: left;

					}

					.productItems_right_top_right {
						font-size: 24rpx;
						color: #657180;
						width: 180rpx;
						text-align: right;

					}

				}

				.productItems_right_bottom {
					margin-top: 28rpx;

					.productItems_right_bottom_left {
						color: #FF5A5F;
						font-size: 28rpx;
						font-weight: bold;

						span {
							color: #BFBFBF;
							font-size: 24rpx;
							margin-left: 16rpx;
							font-weight: 500;
							text-decoration: line-through
						}

					}
					 
					.productItems_right_bottom_right {
						width: 88rpx;
						height: 48rpx;
						background: #295EFF;
						border-radius: 8rpx;
						font-size: 28rpx;
						color: #fff;
						text-align: center;
						line-height: 48rpx;

					}

				}
			}
		}





		.prizeDraw_top {
			width: 100%;
			height: 100rpx;
			position: relative;
			text-align: center;
			font-size: 32rpx;
			line-height: 100rpx;

			.prizeDraw_top_close {}


			.prizeDraw_top_close_left {
				position: absolute;
				left: 0;
				top: 10rpx;
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


			.closeImg {
				position: absolute;
				right: 0;
				top: 32rpx;
				width: 32rpx;
				height: 32rpx;
			}

		}


		.prizeDraw_top_title {
			width: 100%;
			height: 96rpx;
			font-size: 28rpx;
			color: #464C5B;
			text-align: left;
			font-weight: 500;
			line-height: 64rpx;
			padding: 0 32rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: relative;
			padding-bottom: 32rpx;

			input {
				width: 100%;
				height: 100%;
				border: 1rpx solid #979797;
				border-radius: 16rpx;
				padding: 0 124rpx 0 24rpx;
				box-sizing: border-box;
				font-size: 24rpx;

			}

			.inputSeach {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 56rpx;
				top: 6rpx;
			}

		}


		.prizeDraw_user_item_top {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #D7DDE4;
			display: flex;
			justify-content: flex-start;
			padding: 0 24rpx;
			box-sizing: border-box;
			align-items: center;

			.prizeDraw_user_item_top_left {
				width: 62rpx;
				height: 62rpx;
				margin-right: 16rpx;

				image {
					border-radius: 50%;
				}
			}

		}

		.prizeDraw_items_cont_items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			margin-top: 20rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;

			color: #8C8C8C;

			.prizeDraw_items_cont_items_left {
				width: 100%;
				display: flex;
				align-items: center;


				.color_blue {
					color: #295EFF;
				}

				.prizeDraw_items_cont_items_cont {
					width: 480rpx;
					text-align: left;
					color: #464C5B;
				}
			}

		}

		.listSpace {
			padding-top: 100rpx;
		}

		.color_hui {
			background: #C8C9CC !important;
		}
	}
</style>
